<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <div id="app">
             <div
                v-for="(item) in items"
                :key='item.id'
             >
                <h1>{{item.name}}</h1>
                <div v-for='item2 in item.itemse' :key='item2.id'>
                    {{item2.text}}
                </div>
             </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            // 监管的容器 
            el: '#app',
            // 数据定义
            data: {
                fruits: ['apple', 'pear', 'banana', 'orange'],
                items: [
                    {
                        id: 1,
                        name: "可乐",
                        itemse: [
                            { id: 4, text: "冷冻可乐" },
                            { id: 5, text: "香草可乐" },
                        ],
                    },

                    {
                        id: 2,
                        name: "雪碧",
                        itemse: [
                            { id: 6, text: "冷冻雪碧" },
                            { id: 7, text: "青柠雪碧" },
                        ],
                    },
                    {
                        id: 3,
                        name: "橙子",
                        itemse: [
                            { id: 8, text: "冷冻橙子" },
                            { id: 9, text: "新鲜橙子" },
                        ],
                    },
                ],
            }
        })





    </script>
</body>

</html>